<template>
  <!-- <div class="content-box">
  <common-header :title="title"></common-header>-->
  <div class="page-content">
    <div class="userBalance">
      <h2>账户可用余额(元)</h2>
      <h3>{{amount_total|money("¥")}}</h3>
    </div>
    <div class="payDetails">
      <div class="title">起投金额</div>
      <div class="text">
        ¥
        <span>{{minCount}}</span>元
      </div>
    </div>
    <!-- <div class="payDetails">
      <div class="title">最大投资金额</div>
      <div class="text">
        ¥
        <span>{{maxnum}}</span>元
      </div>
    </div> -->
    <div class="payDetails">
      <div class="title">结息时间</div>
      <div class="text">
        满
        <em>24小时</em>自动结息
      </div>
    </div>

    <van-field
      v-model="count"
      type="text"
      label="投资金额"
      placeholder="请输入投资金额"
      clearable
      required
      input-align="right"
      error-message-align="right"
      :error-message="countMessage"
    />
    <!-- <div class="payDetails">
        <div class="title"></div>
        <div class="text">
          最低起投
          <em>200</em>元
        </div>
    </div>-->
    <van-field
      v-model="payPassword"
      type="password"
      label="支付密码"
      placeholder="请输入支付密码"
      required
      clearable
      input-align="right"
      error-message-align="right"
      :error-message="payPasswordMessage"
    />
    <div class="btnPay" @click="pay()">立即投资</div>
    <commonFooter></commonFooter>
  </div>
  <!-- </div> -->
</template>
<script>
import { projectOneApi, ordersBuyApi } from "@/api";
import { commonFooter } from "common";
import { integer } from "@/utils/regRex";
import { HAS_BANK } from "@/store/mutation-types";
import { createNamespacedHelpers } from "vuex";
let { mapGetters } = createNamespacedHelpers("user");
export default {
  name: "pay",
  components: {
    commonFooter
  },
  computed: {
    ...mapGetters(["amount_total"])
  },
  data() {
    return {
      minCount: 0,
      count: "",
      payPassword: "",
      countMessage: "",
      maxnum: "",
      payPasswordMessage: "",
      title: "投资"
    };
  },
  methods: {
    pay() {
      this.countMessage = "";
      this.payPasswordMessage = "";
      if (!this.payPassword) {
        this.payPasswordMessage = "请输入支付密码";
      }

      if (!this.count) {
        this.countMessage = "请输入投资金额";
        return;
      } else if (!integer.test(this.count)) {
        this.countMessage = "投资金额只能为正整数";
        return;
      } else if (this.payPassword) {
        let _this = this;
        ordersBuyApi({
          token: this.$route.query.token,
          paypwd: this.payPassword,
          amount: this.count
        }).then(res => {
          this.$toast({
            message: res.msg,
            duration: 600,
            onClose: function() {
              if(res.code == 503){
                 _this.$router.push({path:"/user/realname",query:{redirect:_this.$route.path}});
              }
              if (res.code == 200) {
                _this.$router.push("/user/investment");
              }
            }
          });
        });
      }
    }
  },
  mounted() {
    projectOneApi({ token: this.$route.query.token }).then(res => {
      if (res.code == 200) {
        this.minCount = res.data.price;
        this.progress = res.data.progress;
        this.count_total = res.data.count;
        this.maxnum = res.data.maxnum;
      }
    });
  }
};
</script>
<style lang="less" scoped>
@import "~styles/variable.less";
.userBalance {
  // margin: 0.2rem;
  // border-radius: 0.2rem;
  padding: 0.5rem 0.3rem;
  background: @orange-color;
  color: #fff;
  overflow: hidden;
  h2 {
    font: 0.3rem/1.5 "Microsoft YaHei";
  }
  h3 {
    font: 600 0.6rem/1.5 "Microsoft YaHei";
  }
}
.btnPay {
  background-color: @orange-color;
  cursor: pointer;
  text-align: center;
  border-radius: 0.12rem;
  font: 0.45rem/3 "Microsoft YaHei";
  color: #fff;
  margin: 0.5rem;
}
.payDetails {
  border-top: 0px;
  overflow: hidden;
  padding: 0.2rem;
  display: flex;
  background: #fff;
  box-shadow: inset 0 0px 0.02rem #aaa;
  .title {
    width: 4rem;
    font: 0.38rem/1rem "Microsoft YaHei";
  }
  .text {
    flex: 1;
    font: 0.38rem/1rem "Microsoft YaHei";
    text-align: right;
    span {
      color: #f00;
      font-size: 0.5rem;
      font-weight: 700;
    }
    em {
      color: #00f;
      font-style: normal;
      margin: 0 0.1rem;
    }
    input {
      width: 100%;
      font: 0.38rem/1rem "Microsoft YaHei";
      text-align: right;
    }
  }
}
</style>